<script setup>
// 首页
import { ref, onMounted, reactive } from 'vue'
import { genFileId, ElInput, ElMessage } from 'element-plus'
import { homeadverApi, abtswmApi, newlistApi, twohandlistApi } from '../../api/index'
import { useRouter, useRoute } from 'vue-router'
import { useStorage } from '@vueuse/core'
const router = useRouter()
const fileList = ref([])
// 账号密码表单
const ruleFormRef = ref()
const imglist = ref([]) //轮播图
const abtinfo = ref({}) //关于我们
const onlist = ref([]) //新闻热门第一条
const otherlist = ref([]) //新闻热门后面3条
const twohandlist = ref([]) //二手热门
const codes = ref() //验证码

const uploadRef = ref()
const data = reactive({
  Flies:'',
})


// 左边一键回收按钮开关
const regichange = function () {
  // 判断有没有token，没有就跳转到登录页面，并且存一个id为0，后面用这个id来判断是不是从首页的一键回收按钮跳到登录页面的
  if (useStorage('token').value == undefined) {
      ElMessage.error('您还未登录')
  } else {
    router.push({path:'/recovery/recover'})
  }
}

// 上传后接口返回数据回来后的函数
const onsuccess = function (uploadFile) {
  if (uploadFile.code !== 0) {
    ElMessage.error('上传失败')
    fileList.value.splice(0,1)
  } else {
    ElMessage({
            message: uploadFile.msg,
            type: 'success',
    })
    data.Flies = uploadFile.data.path
  }
}

// 替换图片
const handleExceed = (files) => {
    uploadRef.value.clearFiles()
    const file = files[0]   
    file.uid = genFileId()
    uploadRef.value.handleStart(file)
    uploadRef.value.submit()
}

// 打开图片
const push = function (val) {
  if (val.response === undefined) {
        window.open(val.url);
    } else {
        window.open(val.response.data.path);
    }
}


// 获取轮播图
const getadver =async function () {
  const msg = await homeadverApi({
    limit: 20,
    Position:'PC_Index'
  })
  if (msg.data.code == 0) {
    // console.log(msg)
    imglist.value = msg.data.data
  }
}
// const btnces = function () {
//   tokenCookie.value = '111111'
//   idcokk.value = '2222'
//   console.log(tokenCookie.value)
//   console.log(idcokk.value)
// }

// if (tokenCookie.value) {
//   console.log('nihao')
// }

// const open = function () {
//   window.open('http://localhost:3000/guanyu/abts?tab=2')
// }

// 关于我们信息
const abt =async function () {
  const res = await abtswmApi()
  if (res.data.code == 0) {
    // console.log(res.data.data)
    abtinfo.value = res.data.data
  }
}


// 获取首页新闻列表
const newlist = async function (id) {
  const res = await newlistApi({
    limit: 4,
    page: 1,
    OnIndex:1
  })
  if (res.data.code == 0) {
      onlist.value = res.data.data[0]
      for (let i = 0; i < res.data.data.length - 1; i++){
        otherlist.value.push(res.data.data[i + 1])
      }
  } 
}



// 获取首页二手产品展示列表
const gethandlist = async function (id) {
  const res = await twohandlistApi({
    limit: 3,
    page: 1,
    OnIndex:1
  })
  if (res.data.code == 0) {
    for (let i = 0; i < res.data.data.length; i++){
      twohandlist.value.push(res.data.data[i])
    }
  }
}
const pushtwehand = function (id) {
  router.push({path:'/twohand/hanslist',query:{id:id}})
}

const pushlist = function (id) {
  router.push({path:'/new_list/newDtlist',query:{id:id}})
}

const pushabt = function () {
  scroll(0, 0)
  useStorage('abtid').value = 1
  router.push({path:'/guanyu/abts'})
}
const pushnew = function () {
  scroll(0,0)
  router.push({path:'/new_list/newList'})
}
const pushthd = function () {
  scroll(0,0)
  router.push({path:'/twohand/twohands'})
}
onMounted(() => {
  getadver()
  abt()
  newlist()
  gethandlist()
})
</script>
<template>
 

  <el-carousel height="380px" style="margin-top: 136px;">
      <el-carousel-item v-for="(item,index) in imglist" :key="index">
          <a :href="item.url" :title="item.title">
            <img :src="item.thumb" alt="" style="width: 100%;height:100%">
          </a>
      </el-carousel-item>
    </el-carousel>
 
  <!-- 主体部分 -->
  <div class="main">
    <div class="main_zuo s20">
      <div class="main_lc"><img src="../../images/lc.jpg" width="848" height="147" alt="" /></div>
      <div class="main_tj s20">
        <div class="main_tou" @click="pushnew" style="cursor:pointer">
          <div class="main_tou_zw">行业新闻</div>
          <div class="main_tou_yw"><a href="/new_list/newList"></a>Industry news</div>
          <div class="main_tou_ge"><img src="../../images/more.jpg" width="36" height="15" /></div>
        </div>
        <div class="main_tj_zh">
          <div class="main_zh_zh_list3 s15">
            <div class="zt">
              <div v-if="onlist.thumb ==''" style="width: 380px;height:230px"></div>
              <img v-if="onlist.thumb !==''" :src="onlist.thumb" width="380" height="230" alt="" />
            </div>
            <div class="mainNews"><a @click="pushlist(onlist.id)" :to="{path:'/new_list/newDtlist',query:{id:onlist.id}}"><strong>{{ onlist.title}}</strong>
                <p>{{ onlist.description }}</p>
              </a></div>
            <div class="lb" v-for="(item,index) in otherlist" :key="item.id"><a @click="pushlist(item.id)" :to="{path:'/new_list/newDtlist',query:{id:item.id}}">{{ item.title }}</a></div>
          </div>
        </div>
      </div>
      <div class="main_rm s20">
        <div class="main_tou" @click="pushthd" style="cursor:pointer" >
          <div class="main_tou_zw">二手优品</div>
          <div class="main_tou_yw">Second hand products</div>
          <div class="main_tou_ge"><img src="../../images/more.jpg" width="36" height="15" /></div>
        </div>
        <div class="main_zh">
          <div class="main_zh_zh">
            <div class="box" v-for="(item,index) in twohandlist" :key="item.id">
              <a @click="pushtwehand(item.id)" class="ahover" :to="{path:'/twohand/hanslist',query:{id:item.id}}"> 
                <div class="img_cp"><img :src="item.thumb" style="width: 100%;height:100%"  />
                </div><span class="text" style="text-overflow: ellipsis;overflow: hidden;">{{ item.title }}</span>
              </a>
            </div>
            <!-- <div class="box">
              <a href="#">
                <div class="img_cp"><img src="../../images/tu5.jpg" width="133" height="120" /></div><span
                  class="text">把生活过成你想要的样子</span>
              </a>
            </div>
            <div class="box">
              <a href="#">
                <div class="img_cp"><img src="../../images/tu5.jpg" width="133" height="120" /></div><span
                  class="text">把生活过成你想要的样子</span>
              </a>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧 -->
    <div class="main_you s20">
      <div class="yjhs" @click="regichange" style="height: 90px;line-height: 90px;">
        <p><i></i>一键回收</p><span style="display: flex;height:100%;align-items: center;justify-content: space-around;"><img src="../../images/fxj.png" alt="" :style="{'width': '27px','height':'27px'}" ></span>
      </div>
      <div class="main_xgg s20">
        <div class="main_xgg_list">
          <div class="main_xgg_list_left">
            <div class="text">微信小程序</div>
            <div class="text">下单更方便</div>
            <div class="text"><img src="../../images/psyp.jpg" width="167" height="33" /></div>
          </div>
          <div class="main_xgg_list_right"><img src="../../images/sj.jpg" width="132" height="147" /></div>
        </div>
      </div>
      <div class="main_gy s20">
      <div class="main_tou" @click="pushabt" style="cursor:pointer">
        <div class="main_tou_zw" >关于我们</div>
        <div class="main_tou_yw">ABOUT US</div>
        <div class="main_tou_ge"><img src="../../images/more.jpg" width="36" height="15" /></div>
      </div>
      <div class="main_gy_tu"><img :src="abtinfo.thumb" width="290" height="150" /></div>
      <div class="main_gy_text">
        {{ abtinfo.description}}
      </div>
    </div>
    </div>
  </div>
<!-- <button @click="btnces">nihao</button>
<button @click="btnsc">nihao</button> -->
<div style="clear:both"></div>
</template>
<style scoped>
.el-carousel__item{
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  height:185px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.ahover:hover{
  color: #FF6E0A !important;
}
</style>